<!-- 分类列表组件 -->
<template>
  <div
    class="categorylist"
    v-infinite-scroll="loadMore"
    infinite-scroll-distance="10"
  >
    <!-- 搜索 -->
    <div class="cateheader">
      <div class="search">
        <a href="javascript:;">
          <i class="iconfont icon-fanhui1" onclick="window.history.back()"></i>
        </a>
        <div class="input">
          <a href="javascript:;"></a>
          <span></span>
          <span class="iconfont icon-sousuo"></span>
        </div>
        <div class="fenlei" @click="changeshow">
          <span class="iconfont icon-fenlei1" v-if="show"></span>
          <span class="iconfont icon-fenlei" v-else></span>
        </div>
      </div>
    </div>
    <!-- 列表表头 -->
    <div class="filter_tab">
      <div class="pro">
        <div
          :class="activeIndex == index ? 'item active' : 'item'"
          v-for="(tabs, index) in tabsDatas"
          :key="index"
          @click="changeCategoryTabs(index, tabs.sort, tabs.up)"
        >
          <span v-text="tabs.title"></span>
          <i
            class="iconfont icon-triangledownfill"
            :class="
              tabs.up
                ? 'iconfont icon-triangleupfill'
                : 'iconfont icon-triangledownfill'
            "
            v-if="tabs.hide"
          ></i>
        </div>
        <div class="item" @click="showMask = !showMask">
          <a href="javascript:;">
            <i class="iconfont icon-shaixuan"></i>
            筛选
          </a>
        </div>
      </div>
    </div>
    <!-- 列表商品 -->
    <List :moreData="categorydetailist"></List>
    <!-- 快速导航 -->
    <div class="sus-nav">
      <div id="moveDiv" :class="showaside ? 'common-nav active' : 'common-nav'">
        <div id="rightDiv" class="right-cont">
          <ul>
            <router-link to="/home" tag="li">
              <i class="iconfont icon-shouye"></i>
              <p>首页</p>
            </router-link>
            <router-link to="/home" tag="li">
              <i class="iconfont icon-sousuo"></i>
              <p>搜索</p>
            </router-link>
            <router-link to="/category" tag="li">
              <i class="iconfont icon-fenlei2"></i>
              <p>分类</p>
            </router-link>
            <router-link to="/shopcart" tag="li">
              <i class="iconfont icon-gouwuche"></i>
              <p>购物车</p>
            </router-link>
            <router-link to="/person" tag="li">
              <i class="iconfont icon-gerenzhongxin"></i>
              <p>个人中心</p>
            </router-link>
          </ul>
        </div>
        <div class="nav-icon" @click="showaside = !showaside">快速导航</div>
      </div>
      <div :class="showaside ? 'common-show active' : 'common-show'"></div>
    </div>
    <!-- 筛选蒙版 -->
    <transition name="sx">
      <div class="sxmask" v-if="showMask">
        <ul class="mod_list">
          <li class="radio-switching">
            <div class="super_li">
              <div class="big">自营产品</div>
              <mt-switch v-model="value"></mt-switch>
            </div>
          </li>
        </ul>
        <ul class="tags_selection">
          <li>
            <label>仅看有货</label>
          </li>
          <li>
            <label>促销</label>
          </li>
        </ul>
        <ul class="mod_list">
          <li class="radio-switching">
            <div class="super_li">
              <div class="big">价格区间</div>
            </div>
          </li>
          <li class="price">
            <div class="price_input">
              <div class="max">
                <input type="tel" placeholder="最低价" />
              </div>
            </div>
            <span class="price_hang"></span>
            <div class="price_input">
              <div class="min">
                <input type="tel" placeholder="最高价" />
              </div>
            </div>
          </li>
        </ul>
        <div class="mask-footer">
          <div class="close" @click="showMask = !showMask">关闭</div>
          <div class="ok" @click="submitPriceFn">确定</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import List from "@/components/List.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { List },
  data() {
    //这里存放数据
    return {
      value: false,
      show: true,
      oHeight: 0,
      activeIndex: 0,
      showMask: false,
      showaside: false,
      tabsDatas: [
        {
          id: 1,
          title: "综合",
          hide: true,
          up: false,
          sort: "goods_id",
        },
        {
          id: 2,
          title: "新品",
          hide: false,
          up: false,
          sort: "last_update",
        },
        {
          id: 3,
          title: "销量",
          hide: false,
          up: false,
          sort: "sales_volume",
        },
        {
          id: 4,
          title: "价格",
          hide: true,
          up: false,
          sort: "shop_price",
        },
      ],
      cat_id: "",
      page: 1,
      size: 10,
      sort: "goods_id",
      order: "desc",
      min: "",
      max: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    categorydetailist() {
      return this.$store.state.categorydetailist;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeshow() {
      this.show = !this.show;
    },
    changeCategoryTabs(index, sort, up) {
      this.$store.state.categorydetailist = [];
      this.page = 1;
      this.activeIndex = index;
      this.tabsDatas[index].up = !up;
      if (up) {
        this.order = "desc";
      } else {
        this.order = "asc";
      }
      this.sort = sort;
      this.getList();
    },
    getList() {
      let params = {
        cat_id: this.cat_id,
        min: this.min,
        max: this.max,
        size: this.size,
        page: this.page,
        sort: this.sort,
        order: this.order,
      };
      this.$store.dispatch("Actcategorydetailist", params);
    },
    loadMore() {
      ++this.page;
      this.getList();
    },
    submitPriceFn() {
      this.page = 1;
      this.$store.state.categorydetailist = [];
      this.getList();
      this.showMask = false;
    },
  },
  mounted() {
    this.cat_id = this.$route.params.catid;
    this.$store.state.categorydetailist = [];
    this.getList();
  },
};
</script>
<style lang="less">
.sx-enter,
.sx-leave-to {
  transform: translateX(100%);
}
.sx-enter-active,
.sx-leave-active {
  transition: all 0.2s linear;
}
.sxmask {
  position: fixed;
  z-index: 9999;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f6f6f9;
  .mod_list {
    background: #fff;
    margin-bottom: 1.5rem;
    li {
      position: relative;
      line-height: 2rem;
      font-size: 1.4rem;
      overflow: hidden;
      padding: 1rem;
      .super_li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .big {
          height: 2rem;
          max-width: 20rem;
          overflow: hidden;
          font-size: 1.5rem;
          color: #333;
          text-overflow: ellipsis;
        }
        .mint-switch {
          .mint-switch-core {
            width: 48px;
            height: 28px;
            &::before {
              width: 46px;
              height: 26px;
            }
            &::after {
              width: 26px;
              height: 26px;
            }
          }
          .mint-switch-input:checked + .mint-switch-core {
            border-color: #f92028;
            background-color: #f92028;
          }
        }
      }
    }
    .price {
      position: relative;
      line-height: 2rem;
      padding: 1rem;
      display: flex;
      &:before {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #e5e5e5;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
      }
      .price_input {
        padding: 13px 15px;
        text-align: center;
        border-radius: 3px;
        font-size: 14px;
        color: #333;
        background-color: #f7f7f7;
        input {
          border: 0;
          margin: 0;
          padding: 0;
          width: 100%;
          outline: none;
          display: block;
          text-align: center;
          box-sizing: border-box;
          background-color: transparent;
        }
      }
      .price_hang {
        position: relative;
        width: 30px;
        height: 40px;
        &:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -5px;
          width: 10px;
          height: 1px;
          background-color: #f1f1f1;
        }
      }
    }
  }
  .tags_selection {
    background-color: #fff;
    margin-bottom: 1.5rem;
    padding: 1rem 0 0 1rem;
    text-align: center;
    font-size: 1.2rem;
    display: flex;
    overflow: hidden;
    li {
      box-sizing: border-box;
      width: 33.33%;
      padding-right: 1rem;
      height: 2.8rem;
      line-height: 2.8rem;
      margin-bottom: 1rem;
      overflow: hidden;
      label {
        position: relative;
        display: block;
        padding: 0 5px;
        color: #666;
        background-color: #f7f7f7;
        border-radius: 3px;
        max-width: 100%;
        font-weight: 400;
        margin-bottom: 0;
      }
    }
    .active {
      label {
        border: 1px solid #e93b3d;
        color: #e93b3d;
        background-color: #fff;
        height: 2.5rem;
        line-height: 2.5rem;
        &:after {
          content: "";
          position: absolute;
          right: 0;
          bottom: 0;
          width: 15px;
          height: 15px;
          border-radius: 0 0 2px 0;
          background: url(../../../assets/image/pitchon.png);
          background-size: 15px auto;
          overflow: hidden;
          z-index: 1;
        }
      }
    }
  }
  .mask-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 4.4rem;
    background: #ffffff;
    display: flex;
    div {
      flex: 1;
      text-align: center;
      line-height: 4.4rem;
      font-size: 1.5rem;
      box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
    }
    .ok {
      background: #e93b3d;
      color: #fff;
    }
  }
}
.categorylist {
  .cateheader {
    height: 4.4rem;
    .search {
      background: #fff;
      left: 0;
      right: 0;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f1f1f1;
      .icon-fanhui1 {
        font-size: 20px;
        color: #999;
        margin: 0 10px 0 0;
      }
      .input {
        width: 100%;
        padding: 5px 10px 5px 20px;
        margin: 0 10px 0 0;
        border-radius: 50px;
        border: 1px solid #ddd;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }

        .icon-sousuo {
          font-size: 18px;
          margin-right: 3px;
          color: #777;
        }
      }
      .fenlei {
        width: 41px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        .icon-fenlei1 {
          font-size: 20px;
        }
        .icon-fenlei {
          font-size: 30px;
        }
      }
    }
  }
  .filter_tab {
    width: 100%;
    text-align: center;
    background-color: #fff;
    height: 3.5rem;
    line-height: 3.5rem;
    border-bottom: 1px solid #f1f1f1;
    .pro {
      display: flex;
      justify-content: space-around;
      .item {
        .iconfont {
          margin-left: 0.1rem;
          position: relative;
          font-size: 1.1rem;
          transition: 0.2s ease;
        }
        &:last-child {
          .iconfont {
            font-size: 1rem;
            margin: 0 0.3rem 0 0;
          }
          .icon-shaixuan {
            font-size: 15px;
          }
        }
      }
      .active {
        color: #f92028;
      }
    }
  }
  .sus-nav {
    .common-nav {
      position: fixed;
      width: 4.5rem;
      z-index: 1999;
      border-radius: 2.5rem;
      right: 1rem;
      bottom: 18%;
      height: 4.5rem;
      overflow: hidden;
      background: hsla(0, 0%, 100%, 0.9);
      transition: all 0.5s;

      .right-cont {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4.5rem;
        border-radius: 0.5rem 0 0 0.5rem;
        ul {
          overflow: hidden;
          li {
            float: left;
            text-align: center;
            width: 100%;
            height: 4.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            &:first-child {
              padding-top: 1rem;
              box-sizing: initial;
            }
            i {
              font-size: 1.5rem;
              color: #666;
            }
            p {
              font-size: 1rem;
              color: #666;
              margin-top: 0.1rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
      .nav-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background-color: #f92028;
        color: #fff;
        padding: 1rem 1rem;
        font-size: 1.2rem;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .active {
      height: 28.25rem;
    }
    .common-show {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1998;
      background: rgba(0, 0, 0, 0.4);
      display: none;
    }
    .active {
      display: block;
    }
  }
}
</style>